<template>
    <div class="home">
        <el-container>
            <el-header>
                <h3>“微商城”后台管理系统</h3>
                <div class="user">
                    <el-dropdown>
                        <div class="user">
                            <el-avatar :size="40" :src="userStore.userInfo.avatar" />
                            <div class="name">{{ userStore.userInfo.username }}</div>
                        </div>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="router.push('/my')">个人中心</el-dropdown-item>
                                <el-dropdown-item @click="logout">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu :default-active="route.path" router>
                        <el-menu-item v-for="item in route.matched[0].children" :index="item.path">
                            <el-icon>
                                <component :is="item.icon" />
                            </el-icon>
                            <span>{{ item.name }}</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <el-card>
                        <RouterView />
                    </el-card>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useTokenStore } from '@/stores/token';
import { getUserInfoService } from '@/apis/user';
import { useUserInfoStore } from '@/stores/userInfo';
import { ElMessageBox, ElMessage } from 'element-plus';
const route = useRoute();
const router = useRouter();
const userStore = useUserInfoStore();
const logout = () => {
    ElMessageBox.confirm('确认退出登录吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 清除token
        useTokenStore().removeToken();
        // 清除用户信息
        useUserInfoStore().removeUserInfo();
        // 跳转登录页面
        router.push('/login');
        ElMessage.success('欢迎下次登录');
    }).catch(() => { });
}
const getUserInfo = async () => {
    const res = await getUserInfoService();
    // 保存用户信息到本地
    userStore.setUserInfo(res.data);
}
getUserInfo();
</script>
<style scoped>
.home {
    width: 100%;
    height: 100vh;
}

.el-header {
    background-color: #409eff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    color: #fff;
}

.user {
    display: flex;
    align-items: center;
    column-gap: 10px;
    color: #fff;
}

.el-main {
    overflow-y: scroll;
    height: calc(100vh - 60px);
}
</style>